import React, { Component } from 'react';
import 'styles/data-center/report-management/custom-report/index-graphic.scss';
import { fontSizeOptionsObject } from 'containers/data-center/report-management/custom-report/custom-report.modal';

import { Spin } from 'antd';

import TweenOne from 'rc-tween-one';
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';
import noDataImg from 'images/data-center/report-no-data.png';
import { messages } from 'share/common';
import Condition from 'components/condition';

const { If, Else } = Condition;
import WaterMark from 'components/water-mark';

TweenOne.plugins.push(Children);

class IndexGraphic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      style: 'font-m',
      value: 10000,
      valueList: [],
      animation: null,
      titleIndicate: ''
    };
  }

  componentWillMount() {

  }

  componentDidMount() {
    const { props } = this;
    if (props.loading || props.dataLength === 0) {
      return;
    } else {
      this.initData(props);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.loading || nextProps.dataLength === 0) {
      return;
    } else {
      this.initData(nextProps);
    }
  }

  initData = (nextProps) => {
    if (this.handleType(nextProps)) { //列表模式
      const { options } = nextProps;
      let titleIndicate = options.labelAndValue.indicator.length && options.labelAndValue.indicator[0].name || '';
      let indicatorCode = options.labelAndValue.indicator.length && options.labelAndValue.indicator[0].code;
      let titleDimension = options.labelAndValue.dimension.name || '';
      let dimensionCode = options.labelAndValue.dimension.code;

      this.setState({
        titleIndicate,
        indicatorCode,
        titleDimension,
        dimensionCode,
        valueList: options.data
      });
    } else { //单指标模式
      const { options } = nextProps;
      let titleIndicate = options.labelAndValue.indicator.length && options.labelAndValue.indicator[0].name || '';
      let indicatorCode = options.labelAndValue.indicator.length && options.labelAndValue.indicator[0].code;
      let data = indicatorCode && Number(options && options.data && options.data.length && options.data[0] !== null && options.data[0][indicatorCode] || 0);
      let style = options.widget.style || 'font-m';
      this.setState({
        titleIndicate,
        indicatorCode,
        style,
        value: data
      }, () => {
        this.trigger();
      });
    }
  };

  renderList = () => {
    const { fullScreenMode } = this.props;
    const { titleIndicate, indicatorCode, titleDimension, dimensionCode, valueList } = this.state;
    return (
      <div className='index-graphic-list'>
        <div className="header">
          <div className='title-dimension'>{titleDimension || '-'}</div>
          <div className="title-indicator">{titleIndicate || '-'}</div>
        </div>
        <div className={`list-box ${fullScreenMode ? 'full-screen-mode' : ''}`}>
          {
            valueList.map((item) => {
              return (
                <div className="single-line">
                  <div className="dimension-data">{(item && item[dimensionCode]) || '-'}</div>
                  <div className="indicator-data">{(item && item[indicatorCode]) || '-'}</div>
                </div>
              );
            })
          }
        </div>
      </div>
    );
  };

  componentWillUnmount() {

  }

  handleType = (nextProps) => {
    const { options } = nextProps || this.props;
    if (options && options.labelAndValue && options.labelAndValue.dimension && options.labelAndValue.dimension.name) {
      return true;
    } else {
      return false;
    }
  };

  trigger = () => {
    const { value } = this.state;
    this.setState({
      animation: {
        Children: {
          value: typeof value === 'number' ? value : 0,
          floatLength: 2
        },
        duration: 1000,
      }
    });
  };

  render() {
    const { options, loading, dataLength, fullScreenMode } = this.props;
    const { titleIndicate, style } = this.state;
    const type = this.handleType();

    return (
      <div className={`index-graphic ${fullScreenMode ? 'full-screen-mode' : ''}`}>
        <WaterMark/>
        <Spin spinning={loading}>
          <Condition>
            <If value={dataLength}>
              {!loading &&
              <Condition>
                <If value={!type}>
                  <div className="full-box">
                    <div className='only-indicator'>
                      <div className="title"
                           style={{ fontSize: fontSizeOptionsObject[style].title }}>
                        {titleIndicate}
                      </div>
                      <TweenOne
                        animation={this.state.animation}
                        className='number'
                        style={{ fontSize: fontSizeOptionsObject[style].data }}
                      >
                        0
                      </TweenOne>
                    </div>
                  </div>
                </If>
                <Else>
                  {this.renderList()}
                </Else>
              </Condition>
              }
            </If>
            <Else>
              <div className="empty-content">
                <img className='empty-content-image'
                     src={noDataImg}/>
                <p className="empty-content-desc">{messages('common.empty.text')/*暂无数据*/}</p>
              </div>
            </Else>
          </Condition>
        </Spin>
      </div>
    );
  }
}

IndexGraphic.propTypes = {};

export default IndexGraphic;
